<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <style>
      .content{
        width: 346px;
        height: 399px;
        border: 1px solid black;
        margin: 0 auto;
      }
      .wrapper{
        position: relative;
        width: 304px;
        height: 38px;
        border: 1px solid #bdbdbd;
        margin: 0 auto;
        margin-bottom: 20px;
      }
      .img-content{
        float: right;
        width: 38px;
        height: 38px;
        border-right: 1px solid #bdbdbd;
        background-image: url(pwd-icons-new.png);
      }
      .txt-content{
        float: right;
        width: 265px;
        height: 38px;
        padding: 0;
        border: none;
        outline: none;
        text-indent: 2rem;
      }
      #user-password+div{
        background-position: -48px 0;
      }
      #user-name:focus+div{
        background-position: 0 -48px;
      }
      #user-password:focus+div{
        background-position: -48px -48px;
      }
      .tips-wrapper{
        width: 346px;
        height: 18.5px;
        padding: 10px 0;
        font-size: 12px;
        background-color: #FFF8F0;
      }
      .tips-inner{
        width: 310px;
        height: 18.5px;
        margin: 0 30px;
      }
      .icon-tips{
        width: 16px;
        height: 16px;
        background-color: pink;
        float: left;
        margin-right: 10px;
      }
      .cont-wrapper{
        text-align: center;
        float: left;
        color: #bdbdbd;
      }
      .choose-wrapper{
        width: 346px;
        height: 55px;
        overflow: hidden;
      }
      .choose{
        float: left;
        box-sizing: border-box;
        text-align: center;
        height: 55px;
        width: 173px;
        padding: 15px 0;
        font-size: 18px;
        border-bottom: 1px solid #bdbdbd;
        /* line-height: 55px; */
      }
      .choose-inner{
        width: 172px;
        height: 24px;
      }
      #choose-inner1{
        border-right: 1px solid  #bdbdbd;
      }
      #choose-inner2{
        color: #e4393c;
      }
      .msg-wrapper{
        height: 33px;
      }
      .forget-pw{
        overflow: hidden;
        height: 16px;
        margin-bottom: 20px;
      }
      a{
        float: right;
        font-size: 12px;
        text-decoration: none;
        color: #666;
        margin-right: 20px;
      }
      a:hover{
        color: red;
        text-decoration: underline;
      }
      .submit{
        height: 34px;
      }
      .submit-btn{
        width: 306px;
        height: 34px;
        background-color:#e4393c;
        margin: 0 auto;
        text-align: center;
        line-height: 34px;
        font-size: 20px;
        color: white;
      }
      .submit-btn:hover{
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="tips-wrapper">
        <div class="tips-inner">
          <div class="icon-tips"></div>
          <div class="cont-wrapper">
            京东不会以任何理由要求您转账汇款，谨防诈骗。
          </div>
        </div>
      </div>
      <div class="choose-wrapper">
        <div class="choose">
          <div id="choose-inner1" class="choose-inner ">扫码登录</div>
        </div>
        <div class="choose">
          <div id="choose-inner2" class="choose-inner">账号登录</div>
      </div>
      </div>
      <div class="msg-wrapper"></div>
      <div class="wrapper">
        <input id="user-name" class="txt-content" type="text" placeholder="邮箱/用户名/手机号" />
        <div class="img-content"></div>
      </div>
      <div class="wrapper"> 
        <input id="user-password" class="txt-content" type="password" placeholder="密码" />
        <div class="img-content"></div>
      </div>
      <div class="forget-pw">
        <a href="https://baidu.com">忘记密码</a>
      </div>
      <div class="submit">
        <div class="submit-btn">登&nbsp;&nbsp;&nbsp;&nbsp;录</div>
      </div>
    </div>
  </body>
</html>